<template>
  <div class="newsCenter">
    <div class="banner">
      <img src="../../../static/images/newsBanner.jpg" class="img-res">
    </div>
    <article>
      <div class="title">
        <h2>News</h2>
      </div>
      <section class="indexNewsC">
        <div class="titleBox">
          <h3>COMPANY NEWS</h3>
          <router-link to="/News/Company/" class="more">More >></router-link>
        </div>
        <div class="companyT">
          <router-link :to="'/News/' + (companyt.id)">
            <img :src="changeImgpath(companyt.litpic)" alt="" class="img-res">
            <h2>{{ companyt.title }}</h2>
            <span>{{ dataTime(companyt.senddate) }}</span>
            <p>{{ companyt.description }}</p>
          </router-link>
        </div>
        <div class="list">
          <ul>
            <li v-for="(item,index) in companyIndexList" :key="index">
              <router-link :to="'/News/' + (item.id)">
                {{ item.title }}
              </router-link>
            </li>
          </ul>
        </div>

      </section>
      <section class="indexNewsC">
        <div class="titleBox">
          <h3>INDUSTRY NEWS</h3>
          <router-link to="/News/Industry/" class="more">More >></router-link>
        </div>
        <div class="companyT">
          <router-link :to="'/News/' + (indust.id)">
            <img :src="changeImgpath(indust.litpic)" alt="" class="img-res">
            <h2>{{ indust.title }}</h2>
            <span>{{ dataTime(indust.senddate) }}</span>
            <p>{{ indust.description }}</p>
          </router-link>
        </div>
        <div class="list">
          <ul>
            <li v-for="(item,index) in industList" :key="index">
              <router-link :to="'/News/' + (item.id)">
                {{ item.title }}
              </router-link>
            </li>
          </ul>
        </div>
      </section>
      <section class="indexNewsC">
        <div class="titleBox">
          <h3>SPECIAL REPORT</h3>
          <router-link to="/News/special/" class="more">More >></router-link>
        </div>
        <div class="spec">
          <a :href="changeUrlPath(specreport.filename)">
            <img v-show="specreport.litpic" :src="changeImgpath(specreport.litpic)" class="img-res">
            <h4>{{ specreport.title }}</h4>
          </a>
        </div>
      </section>
      <section class="indexNewsC">
        <div class="titleBox">
          <h3>EXHIBITION</h3>
          <router-link to="/News/Exhibition/" class="more">More >></router-link>
        </div>
        <div class="exList">
          <el-row>
            <el-col :span="24" v-for="(item,index) in exhibitions" :key="index">
              <div class="grid-content">
                <router-link :to="'/News/' + (item.id)">
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                  <span>Learn more >></span>
                </router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="indexNewsC faq">
        <div class="titleBox">
          <h3>Faq</h3>
          <router-link to="/News/Faq/" class="more">More >></router-link>
        </div>
        <div class="faqList">
          <el-row>
            <el-col :span="24" v-for="(item,index) in faqList" :key="index">
              <div class="grid-content">
                <router-link :to="'/News/' + (item.id)">
                  <p>{{ item.title }}</p>
                </router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
    </article>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      companyt: {},
      companyIndexList: {},
      indust: {},
      industList: {},
      exhibitions: {},
      faqList: {},
      specreport: {}
    }
  },
  mounted () {
    axios.get('/news/spec/company').then(response => {
      this.companyt = response.data.data.newsspec[0]
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/company').then(response => {
      this.companyIndexList = response.data.data.newsLists
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/industry').then(response => {
      this.indust = response.data.data.newsspec[0]
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/industry').then(response => {
      this.industList = response.data.data.newsLists
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/faq').then(response => {
      this.faqList = response.data.data.newsLists
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/exhibitions').then(response => {
      this.exhibitions = response.data.data.newsLists
    }).catch(function (error) {
      console.log(error)
    })
    axios.get('/news/spec/special').then(response => {
      this.specreport = response.data.data.newsspec[0]
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    changeImgpath (img) {
      img = '//www.kefid.com' + img
      return img
    },
    dataTime (time) {
      const timestamp = time
      const newDate = new Date()
      newDate.setTime(timestamp * 1000)
      time = newDate.toLocaleDateString()
      return time
    },
    changeUrlPath (url) {
      url = '//www.kefid.com/v3/special/' + url + '.html'
      return url
    }
  }
}
</script>
<style scoped lang="sass">
.newsCenter
  padding: 52px 0 66px 0
  p
    font-size: 1.2rem !important
article
  padding: 0 1rem
  .title
    h2
      text-align: center
  .indexNewsC
    h3
      border-left: 0.2rem solid #db3f28
      font-size: 1.4rem
      padding: 0.8rem 1rem
    a
      color: #444
      font-size: 1.4rem
    .list
      ul
        padding: 1rem 2rem
        background: #eee
        a
          display: block
          wodth: 100%
          line-height: 2rem
          overflow: hidden
          white-space: nowrap
          text-overflow: ellipsis
.exList
  .el-col-24
    border-bottom: 1px solid #ccc
    padding-bottom: 1rem
    span
      float: right
      margin-right: 2rem
.faq
  .faqList
    .el-col-24
      border: 1px solid #ccc
      padding: 0.2rem 1rem
      border-radius: 0.5rem
      margin-bottom: 1rem
      p
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
.titleBox
  overflow: hidden
  h3
    float: left
  .more
    float: right
    font-size: 1.2rem
    margin-top: 2rem
</style>
